<template>
  <div class="user-detail bg-fog-12 ">
    <div
      class="user-detail__header z-10 fixed bg-fog-12 w-[100%] h-50px flex justify-between items-center px-16px"
    >
      <span class="text-14px font-700 text-text-3">{{ $t("title") }}</span>

      <svg class="h-14px w-14px fill-text-6" @click="$router.go(-1)">
        <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Close"></use>
      </svg>
      <div class="absolute right-45px top-0">
        <img
          class="w-55px"
          src=""
        />
        <span class="text-12px font-900 absolute text-text-3 left-19px top-28px"
          >V3</span
        >
      </div>
    </div>
    <div class="user-detail__body p-12px pt-50px">
      <div class="avatar flex justify-between items-start mt-12px">
        <div class="flex items-center gap-4px px-10px">
          <svg class="h-14px w-14px fill-text-17">
            <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Like"></use>
          </svg>
          <span class="text-12px text-text-3">12</span>
        </div>

        <div class="text-center">
          <img
            src="https://img2.bc.game/avatar/26314837/s?t=1705027219079"
            class="h-70px rounded-70px border-3px border-border-9 border-solid"
          />
          <div class="text-17px text-text-3 font-700 mt-12px">Bzitdbncmpyb</div>
          <div class="text-text-4 text-12px mt-4px">
            <span>{{ $t("user_id") }}:</span>
            <span>26314837</span>
          </div>
        </div>
        <div
          class="h-30px w-30px bg-fog-10 rounded-4px flex items-center justify-center"
          @click="$router.push('/my-profile')"
        >
          <svg class="h-14px w-14px fill-text-14">
            <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Edit"></use>
          </svg>
        </div>
      </div>
      <div class="medals bg-fog-10 rounded-4px p-12px my-12px">
        <div class="flex justify-between">
          <span class="flex items-center ">
            <svg class="w-14px h-14px fill-text-6">
              <use
                xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Medal"
              ></use>
            </svg>
            <span class="text-12px text-text-3 px-6px">{{ $t("medals") }}</span>
            <span class="text-12px text-text-3">0</span>
          </span>
          <span class="flex gap-4px">
            <span
              class="text-text-5 text-12px"
              @click="$router.push('/master-medals')"
              >{{ $t("details") }}</span
            >
            <svg class="h-14px w-14px fill-text-6">
              <use
                xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Arrow"
              ></use>
            </svg>
          </span>
        </div>
        <div class="flex overflow-auto gap-12px mt-12px">
          <img
            :src="medal"
            v-for="medal in medals"
            :key="medal"
            class="w-37px opacity-50"
          />
        </div>
      </div>
      <div class="statistics bg-fog-10 rounded-4px p-12px">
        <div class="flex justify-between">
          <span class="flex items-center ">
            <svg class="w-14px h-14px fill-text-6">
              <use
                xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Statistics"
              ></use>
            </svg>
            <span class="text-12px text-text-3 px-6px">
              {{ $t("statistics") }}</span
            >
          </span>
          <span class="flex gap-4px">
            <span class="text-text-5 text-12px">{{ $t("details") }}</span>
            <svg class="h-14px w-14px fill-text-6">
              <use
                xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Arrow"
              ></use>
            </svg>
          </span>
        </div>
        <div class="statistics-list gap-5px flex justify-between mt-10px">
          <div
            class="statistics-item rounded-4px bg-fog-46 h-72px flex-1 flex flex-col items-center justify-center"
          >
            <span class="flex items-center">
              <svg class="h-14px w-14px fill-text-7">
                <use
                  xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Bet"
                ></use>
              </svg>
              <span class="text-10px">
                {{ $t("total_wins") }}
              </span>
            </span>
            <div class="mt-4px text-center text-text-3 text-14px">487</div>
          </div>
          <div
            class="statistics-item rounded-4px bg-fog-46 h-72px flex-1 flex flex-col items-center justify-center"
          >
            <span class="flex items-center">
              <svg class="fill-text-18 h-14px w-14px">
                <use
                  xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Coin"
                ></use>
              </svg>
              <span class="text-10px ">
                {{ $t("total_bets") }}
              </span>
            </span>
            <div class="mt-4px text-center text-text-3 text-14px">487</div>
          </div>
          <div
            class="statistics-item rounded-4px bg-fog-46 h-72px flex-1 flex flex-col items-center justify-center"
          >
            <span class="flex items-center">
              <svg class="fill-text-18 h-14px w-14px">
                <use
                  xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_TotalWager"
                ></use>
              </svg>
              <span class="text-10px">
                {{ $t("total_wagered") }}
              </span>
            </span>
            <div
              class="mt-4px text-center text-text-3 text-14px w-85px truncate"
            >
              RUB 23,467.16
            </div>
          </div>
        </div>
      </div>
      <div class="favorite-game p-12px bg-fog-10 mt-12px">
        <div class="pt-3px pb-10px text-12px text-text-3">
          {{ $t("favorite") }}
        </div>
        <div class="game-list">
          <div class="game-item flex items-center justify-between mb-12px">
            <div class="flex items-center">
              <img
                class="h-68px rounded-8px"
                src="https://img2.luckybc888.com/game/image/ff0b0511-1f48-43d1-8dd3-294bb6437b4b.png"
              />
              <span class="px-18px">Limbo</span>
            </div>
            <div class="text-10px text-right">
              <div class="text-text-14 leading-16px">{{ $t("wagered") }}</div>
              <div class="text-text-3 leading-16px">RUB 6,589.56</div>
            </div>
          </div>
          <div class="game-item flex items-center justify-between mb-12px">
            <div class="flex items-center">
              <img
                class="h-68px rounded-8px"
                src="https://img2.luckybc888.com/game/image/ff0b0511-1f48-43d1-8dd3-294bb6437b4b.png"
              />
              <span class="px-18px">Limbo</span>
            </div>
            <div class="text-10px text-right">
              <div class="text-text-14 leading-16px">{{ $t("wagered") }}</div>
              <div class="text-text-3 leading-16px">RUB 6,589.56</div>
            </div>
          </div>
          <div class="game-item flex items-center justify-between mb-12px">
            <div class="flex items-center">
              <img
                class="h-68px rounded-8px"
                src="https://img2.luckybc888.com/game/image/ff0b0511-1f48-43d1-8dd3-294bb6437b4b.png"
              />
              <span class="px-18px">Limbo</span>
            </div>
            <div class="text-10px text-right">
              <div class="text-text-14 leading-16px">{{ $t("wagered") }}</div>
              <div class="text-text-3 leading-16px">RUB 6,589.56</div>
            </div>
          </div>
        </div>
      </div>
      <div class="wager-contest p-12px bg-fog-10 mt-12px">
        <div class="pt-3px pb-10px text-12px text-text-3">
          {{ $t("wager_title") }}
        </div>
        <div class="wager-list">
          <div class="text-center">
            <img
              src="https://bc.game/modules/assets/common/empty.png"
              class="h-170px w-170px"
            />
            <div class="text-12px text-text-14">
              {{ $t("oops") }}
            </div>
          </div>
        </div>
      </div>
      <div class="p-17px text-center">
        <span class="text-10px text-text-14">{{ $t("joined") }} 2023/12/6</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { medals } from "./const";
const { t } = useI18n();
const $t = key => {
  return t("user-detail." + key);
};
</script>

<style></style>
